<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: YCB
  Date: 2019/9/27
  Time: 18:50
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>大鹏-逍遥游</title>

    <link rel="stylesheet" href= "${pageContext.request.contextPath}/css/traveldetails.css">

    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/dist/js/bootstrap.js"></script>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
</head>
<body>
<c:choose>
    <c:when test="${memberall.userId != 0}">
        <c:if test="${memberall.userStatus == 0}">
            <img src="http://localhost:8080/mydev/images/vip.png" style="position:absolute;top:23px;right: 345px;z-index: 999;">
        </c:if>
        <c:if test="${memberall.userStatus == 1}">
            <a href="http://localhost:8080/mydev/VIP" style="position:absolute;top:13px;right: 400px;z-index: 999;">开通vip</a>
        </c:if>
    </c:when>
</c:choose>
<div class="header-container" style="width: 100%; min-width: 1500px;  ">

    <div class="row first-div" style="z-index: 999; width: 100%">
        <div class=" left-nav-ul" >
        </div>


        <ul class="mid-nav-ul" >
            <li class="nav-ul-li" >
                <a   style="text-decoration: none" href="http://localhost:8080/mydev/start/index">
                    <div>
                        <img src="http://localhost:8080/mydev/images/logo.png">
                        逍遥游
                    </div>
                </a>

            </li>
            <li class="nav-ul-li" style="background-color: #ff9d00">
                <a style="text-decoration: none;color: #ffffff" href="http://localhost:8080/mydev/start/index">首页</a>
            </li>
            <li class="nav-ul-li">
                <a  style="text-decoration: none" href="http://localhost:8080/mydev/QuestionTable/club_questions">问答</a>
            </li>

            <li class="nav-ul-li">
                <a   style="text-decoration: none" href="http://localhost:8080/mydev/clublist/list">鲲鹏俱乐部</a>
            </li>

            <li class="nav-ul-li new">
                <div class="geren">
                    <a  style="text-decoration: none; color:black" href="">更多</a>
                    <div class="t1"></div>
                </div>
                <div class="hidden1">
                    <ul class="geren-ul">
                        <li>
                            <a  style="text-decoration: none" href="http://localhost:8080/mydev/write/travel">写游记</a>
                        </li>
                        <li>
                            <a  style="text-decoration: none"  href="http://localhost:8080/mydev/myhome/mytravel/${memberall.userId}">我的游记</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li class="nav-ul-li" >
                <c:choose>
                    <c:when test="${memberall.userId != 0}">
                        <c:if test="${memberall.userStatus ==0}">
                             <span  style="color: gold">
                                 欢迎!${memberall.userName}
                             </span>
                        </c:if>
                        <c:if test="${memberall.userStatus ==1}">
                             <span  style="color: black">
                                 欢迎!${memberall.userName}
                             </span>
                        </c:if>


                    </c:when>
                    <c:otherwise>
                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/regist/normalRegist">注册</a>
                    </c:otherwise>
                </c:choose>

            </li>
            <li class="nav-ul-li">
                <c:choose>
                    <c:when test="${memberall.userId != 0}">

                    </c:when>
                    <c:otherwise>
                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/login/login">登陆</a>
                    </c:otherwise>
                </c:choose>


            </li>
        </ul>




        <c:choose>
            <c:when test="${memberall.userId != 0}">

                <div class="right-nav-ul" >
                    <div class="topmaguser" style="  position:relative;left: 0px;top:2px">


                        <a href="http://localhost:8080/mydev/myhome/mytravel/${memberall.userId}" >
                            <img src="http://localhost:8080/mydev/${memberall.userPicture}">
                        </a>

                    </div>
                    <ul class="right-mid" >
                        <li class="nav-ul-li new" >

                            <div class="geren">

                                <a style="text-decoration: none; color:black" href="">个人中心</a>

                                <div class="t2"></div>
                            </div>

                            <div class="hidden1">
                                <ul class="gere-ul">

                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/collect/${memberall.userId}"><img src="http://localhost:8080/mydev/images/savea.png">我的收藏</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/mapview/${memberall.userId}"><img src="http://localhost:8080/mydev/images/foot.png">我的足迹</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/myfoot/answer/${memberall.userId}"><img src="http://localhost:8080/mydev/images/question.png">我的问答</a>
                                    </li>
                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/reply/toaccount/${memberall.userId}"><img src="http://localhost:8080/mydev/images/question.png">回复消息</a>
                                    </li>

                                    <li style="height: 45px;">
                                        <a  style="text-decoration: none" href="http://localhost:8080/mydev/exit"><img src="http://localhost:8080/mydev/images/banka.png">退出登录</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </c:when>
            <c:otherwise>



            </c:otherwise>
        </c:choose>

    </div>
</div>


<div  class="oppo" id="oppo">
    <div style="width: 300px;height: 170px;">
        <img src="${pageContext.request.contextPath}/images/2dc587eeeb3a8f55a9152ebb7a1bb22d.jpg">

    </div>
    <strong>记得点赞收藏哦</strong>
</div>

<script type="text/javascript">
    function menuFixed(id) {
        var obj = document.getElementById(id);
        var _getHeight = obj.offsetTop;

        window.onscroll = function () {
            changePos(id, _getHeight);
        }
    }

    function changePos(id, height) {
        var obj = document.getElementById(id);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < height) {
            obj.style.position = 'relative';
            obj.style.top='720px';
            obj.style.left='950px';

        } else {
            obj.style.position = 'fixed';
            obj.style.top='0px';
            obj.style.right='950px';
        }
    }
    window.onload = function () {
        menuFixed('oppo');
    }
</script>


<div class="main">


    <div class="top-img" style="background-image:url(${travelCompletely.travelnote.getTravPic()})">
        <div class="top-txt">${travelCompletely.travelnote.getTravTitle()}</div>
        <a href="${pageContext.request.contextPath}/hishome/mytravel/${travelCompletely.member.userId}">
            <div class="top-userimg">
                <img src="${pageContext.request.contextPath}/${travelCompletely.member.userPicture}">
            </div>
        </a>



        <div class="good">

            <a href="">
                <div>
                    <span>顶</span>
                </div>
            </a>

            <li>${travelCompletely.travelnote.getTravPraise()}</li>
        </div>


    </div>


    <div class="user">
        <div class="username">
            <a href="">${travelCompletely.member.getUserName()}</a>

            <span><fmt:formatDate value="${travelCompletely.travelnote.getTravTime()}" pattern="yyyy-MM-dd hh:mm:ss"/></span>
            <img src="${pageContext.request.contextPath}/images/eye.png">
            <li>${travelCompletely.travelnote.getTravLooknumber()}</li>




            <div class="have">
                <a>
                    <c:if test="${status=='0'}">
                        <img id="collection" src="${pageContext.request.contextPath}/images/c_discollection_c.png">
                    </c:if>
                    <c:if test="${status=='1'}">
                        <img id="collection" src="${pageContext.request.contextPath}/images/c_collection_c.png">
                    </c:if>

                    <script>
                        $("#collection").click(function () {


                            // 取消收藏
                            if($("#collection").attr("src")=="${pageContext.request.contextPath}/images/c_collection_c.png"){
                                console.log($("#collection").attr("src"));
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/traveldetails/discollect",
                                    type:"post",
                                    datatype:"json",
                                    data:{
                                        "userId":${userId},
                                        "noteId":${noteId}
                                    },
                                    success:function (result) {
                                        $("#collection").attr("src","${pageContext.request.contextPath}/images/c_discollection_c.png")
                                        var number = document.getElementById("revnumber").innerText;
                                        document.getElementById("revnumber").innerText = parseInt(number)-1;
                                        console.log(document.getElementById("revnumber").innerText);
                                        console.log($("#collection").attr("src"));
                                    }
                                })
                            }
                            //收藏
                            else if($("#collection").attr("src")=="${pageContext.request.contextPath}/images/c_discollection_c.png"){
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/traveldetails/collect",
                                    type:"post",
                                    datatype:"json",
                                    data:{
                                        "userId":${userId},
                                        "noteId":${noteId}
                                    },
                                    success:function (result) {
                                        $("#collection").attr("src","${pageContext.request.contextPath}/images/c_collection_c.png")
                                        var number = document.getElementById("revnumber").innerText;
                                        document.getElementById("revnumber").innerText = parseInt(${num})+1;
                                        console.log(document.getElementById("revnumber").innerText);
                                        console.log($("#collection").attr("src"));
                                    }
                                })
                            }
                        })
                    </script>
                </a>
                <div class="havesa">
                    <%--<c:choose>--%>
                        <%--<c:when test="${num} != 0">--%>
                            <%--<li id="revnumber" style="  position:relative;top: 4px;font-size: 17px;margin-left: 16px">${num}</li>--%>
                        <%--</c:when>--%>
                        <%--<c:otherwise>--%>
                            <%--<li id="revnumber" style="  position:relative;top: 4px;font-size: 17px;margin-left: 16px">0</li>--%>
                        <%--</c:otherwise>--%>
                    <%--</c:choose>--%>
                    <li id="revnumber" style="  position:relative;top: 1px;">${num}</li>
                    <li>收藏</li>
                </div>
            </div>
            <div class="up" style="    height: 80px;
                                        width: 120px;
                                        border-left: 1px solid #ececeb;
                                        border-right: 1px solid #ececeb;
                                        float: right;">
                <a class="upxin">
                    <c:if test="${status=='0'}">
                        <img id="thumbsup" src="${pageContext.request.contextPath}/images/up_D.png" style="height: 24px;
                                width: 24px;
                                position: relative;
                                top: 15px;
                                left: 45px;">
                    </c:if>
                    <c:if test="${status=='1'}">
                        <img id="thumbsup" src="${pageContext.request.contextPath}/images/up_D1.png" style="height: 24px;
                                                                                            width: 24px;
                                                                                            position: relative;
                                                                                            top: 15px;
                                                                                            left: 45px;">
                    </c:if>
                    <script>
                        $("#thumbsup").click(function () {
                            // 取消点赞
                            if($("#thumbsup").attr("src")=="${pageContext.request.contextPath}/images/up_D1.png"){
                                console.log($("#thumbsup").attr("src"));
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/TruetravPraise/down",
                                    type:"post",
                                    datatype:"json",
                                    data:{
                                        "userId":${userId},
                                        "noteId":${noteId}
                                    },
                                    success:function (result) {
                                        $("#thumbsup").attr("src","${pageContext.request.contextPath}/images/up_D.png")
                                        var number = document.getElementById("upnumber").innerText;
                                        document.getElementById("upnumber").innerText = parseInt(number)-1;
                                        console.log($("#thumbsup").attr("src"));
                                    }
                                })
                            }
                            //点赞
                            else if($("#thumbsup").attr("src")=="${pageContext.request.contextPath}/images/up_D.png"){
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/truetravPraise/up",
                                    type:"post",
                                    datatype:"json",
                                    data:{
                                        "userId":${userId},
                                        "noteId":${noteId}
                                    },
                                    success:function (result) {
                                        $("#thumbsup").attr("src","${pageContext.request.contextPath}/images/up_D1.png")
                                        var number = document.getElementById("upnumber").innerText;
                                        document.getElementById("upnumber").innerText = parseInt(number)+1;
                                        console.log($("#thumbsup").attr("src"));
                                    }
                                })
                            }
                        })
                    </script>
                </a>
                <div class="upa" style="width: 120px;
                                                height: 30px;
                                                position: relative;
                                                top: 43px;">

                            <li id="upnumber" style="  position:relative;top: 4px;font-size: 17px;margin-left: 16px">${praise}</li>

                    <li style="  position:relative;top: 1px;font-size: 17px;">赞</li>
                </div>
            </div>



        </div>
    </div>


    <div class="date">
        <li>
            <img src="${pageContext.request.contextPath}/images/clock.png">
            <div>
                出发时间
                <span>/</span>
                <fmt:formatDate value="${travelCompletely.travelnote.getTravDate()}" pattern="yyyy-MM-dd"/>

            </div>
        </li>
        <li>
            <img src="${pageContext.request.contextPath}/images/moon.png">
            <div>
                出行天数
                <span>/</span>
                ${travelCompletely.travelnote.getTravDay()} 天
            </div>
        </li>
        <li>
            <img src="${pageContext.request.contextPath}/images/person.png">
            <div>
                人物
                <span>/</span>
                ${travelCompletely.travelnote.getTravType()}
            </div>
        </li>

        <li>
            <img src="${pageContext.request.contextPath}/images/goden.png">
            <div>
                人均费用
                <span>/</span>
                ${travelCompletely.travelnote.getTravCost()}RMB
            </div>
        </li>
    </div>


    <div style="width: 1500px">
        <div class="main-text">
            ${travelCompletely.travelnote.getTravText()}

        </div>
      <div class="reward-mon">

            <a href="">
                <img src="${pageContext.request.contextPath}/images/reward.png" style="opacity: 0">
            </a>
        </div>

    </div>






    <div class="comment">
        <div>




           <c:forEach var="comm" items="${travelCompletely.commMemberList}">
               <div class="mcmt">
                   <div class="mcmt-info">
                       <a href="">
                           <div class="user-img">
                               <img src="${pageContext.request.contextPath}/${comm.commmember.userPicture}">
                           </div>
                       </a>

                       <div class="user-name">
                           <a href="">
                               ${comm.commmember.userName}
                           </a>
                       </div>
                   </div>
                   <div class="mcmt-con">
                           ${comm.tracomm.tracText}
                   </div>
                   <div class="mcmt-time">
                       <fmt:formatDate value="${comm.tracomm.tracTime}" pattern="yyyy-MM-dd hh:mm:ss"/>

                   </div>
               </div>
           </c:forEach>




          <%--  <div class="mcmt">
                <div class="mcmt-info">
                    <a href="">
                        <div class="user-img">
                            <img src="${pageContext.request.contextPath}/images/user1a.jpeg">
                        </div>
                    </a>

                    <div class="user-name">
                        <a href="">
                            飞扬Devin
                        </a>
                    </div>
                </div>
                <div class="mcmt-con">
                    我得先拿502把沙发给黏住了
                </div>
                <div class="mcmt-time">
                    2019-03-12 14:54
                </div>
            </div>--%>








        </div>


    </div>
    <div class="reply">
        <div class="huifu">
            <div class="huifu-d">
                <div style=" width:100px;height:30px;position:relative;top:10px;left: 20px;">
                    回复游记
                </div>

            </div>
        </div>

        <div class="huifu-text">
            <a href="">
                <img src="${pageContext.request.contextPath}/images/usernone.png">
            </a>
            <div class="huifu-main">

                <textarea id="texttravel"></textarea>

            </div>
            <a>
                <div class="huifu-bottom">
                    <button id="repp" onclick="fabiao()" type="button" style="background-color: #ff9d00;width: 160px;height: 40px;border-radius: 5px;">发表回复</button>
                </div>
            </a>
            <script>

                function fabiao() {
                    var replt = $("#texttravel").val();
                    var traid = ${travelCompletely.travelnote.travId}
                    $.ajax({
                        type:"POST",
                        data:"replt="+replt+"&traid="+traid,
                        datatype:"json",
                        url:"${pageContext.request.contextPath}/write/tracomm",
                        success:function (result){
                            window.location.href="${pageContext.request.contextPath}/travel/${travelCompletely.travelnote.travId}"
                        },
                        error:function (result) {
                            window.location.href="${pageContext.request.contextPath}/travel/${travelCompletely.travelnote.travId}"

                        }
                    })
                }
            </script>


        </div>

    </div>


</div>



</body>
</html>
